﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta charset="utf-8">
		<title>数据懒加载实例</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<style>
			/*///////------commonstyle------//////*/
			body { font: 12px/1.5 "Microsoft Yahei", Arial, Tahoma, Helvetica, \5b8b\4f53, sans-serif;}
			html,body,div,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,object,code,legend,button,input,textarea,th,td,a,img {margin: 0;padding: 0;	border: 0;outline: 0;}
			/*清除内外边距*/
			h1,h2,h3,h4,h5,h6 { font-weight: normal;font-size: 100%;}/*设置默认字体*/
			em {font-style: normal;}
			:focus {outline: 0;}
			ul,ol {	list-style: none;}/*重置列表*/
			
			address,caption,cite,em,code,dfn,th,var { font-style: normal; font-weight: normal;}
			form label {cursor: pointer;}
			input,button,select,textarea { font-family: inherit; font-size: 100%; outline: none;}
			input[type="button"],
			input[type="submit"],
			input[type="reset"] { -webkit-appearance: none;}
			textarea { -webkit-appearance: none; resize: none;}
			input {	vertical-align: middle;}
			img { border: 0;}
			/*重置图片元素*/
			
			table {	border-collapse: collapse; border-spacing: 0;}
			/*重置表格*/
			
			a:hover,a:link,a:visited,a:active { text-decoration: none;}
			* { -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
			
			/*input字体默认颜色*/
			:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #8e8e93; }
			::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #8e8e93;}
			input:-ms-input-placeholder,
			textarea:-ms-input-placeholder { color: #8e8e93;}
			input::-webkit-input-placeholder,
			textarea::-webkit-input-placeholder { color: #8e8e93;}
			
			/*///////------thenewstyle------//////*/
			#tycontainer{ transform:translate(0px,-20px); padding: 0 20px;}
			.tyloading{ height: 20px;}
			.list li{  height:20px; line-height: 20px; font-size: 14px; padding:5px 0; }
		</style>
	</head>

	<body>

		<div id="tycontainer">
			<div class="tyloading">努力加载中...</div>
			<div class="content">
				<ul class="list">
					<li class='h2'>Data Lazy Load Simple</li>
					<li>aaaa</li>
					<li>bbbb</li>
					<li>cccc</li>
					<li>dddd</li>
					<li>eeee</li>
					<li>ffff</li>
					<li>gggg</li>
					<li>hhhh</li>
					<li>iiii</li>
					<li>jjjj</li>
					<li>kkkk</li>
					<li>llll</li>
					<li>mmmm</li>
					<li>nnnn</li>
					<li>oooo</li>
					<li>pppp</li>
					<li>qqqq</li>
					<li>rrrr</li>
					<li>ssss</li>
					<li>tttt</li>
					<li>uuuu</li>
					<li>vvvv</li>
					<li>wwww</li>
					<li>xxxx</li>
					<li>yyyy</li>
					<li>zzzz</li>
				</ul>
			</div>

		</div>
		<script type="text/javascript" src="jquery-1.9.1.js"></script>
		<script type="text/javascript" src="DataLazyLoad.js"></script>
		<script type="text/javascript" src="tyloading.js"></script>
	</body>

</html>